<!-- src/App.vue -->
<template>
  <div>
    <!-- <h1>Markdown 编辑器</h1> -->
    <!-- <v-md-editor v-model="localMarkdown" @input="updateMarkdown"/> -->
    <!-- <div v-html="markdownHtml" class="markdown-preview"></div> -->
    <div style="width: 1120px">
      <v-md-editor
        v-model="localMarkdown"
        @change="updateMarkdown"
        right-toolbar="preview sync-scroll fullscreen"
        height="700px"
      ></v-md-editor>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
const props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
});
const localMarkdown = ref(props.modelValue);
watch(
  () => props.modelValue,
  (newVal) => {
    localMarkdown.value = newVal;
  }
);
const emit = defineEmits(["update:modelValue"]);
const updateMarkdown = (value) => {
  console.log("value---", value);

  localMarkdown.value = value;
  emit("update:modelValue", value); // Emit event for v-model
};
</script>

<style>
.markdown-preview {
  border: 1px solid #ccc;
  padding: 20px;
  margin-top: 20px;
}
</style>
